<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- MDUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
        integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
    <title>烟台壹盒包装制品有限公司</title>
    <!-- MDUI JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
        integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
        crossorigin="anonymous"></script>

</head>

<body
    class="mdui-drawer-body-left mdui-appbar-with-toolbar  mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">
    <header class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">
            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
            <a href="../" class="mdui-typo-headline mdui-hidden-xs">烟台壹盒包装制品有限公司</a>
            <!-- <a href="./" class="mdui-typo-title">面积计算</a> -->
            <div class="mdui-toolbar-spacer"></div>
            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i
                    class="mdui-icon material-icons">color_lens</i></span>
        </div>
    </header>

    

    <a id="anchor-top"></a>

    <div class="mdui-container">
        <h1>价格计算</h1>
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">数量</label>
            <input class="mdui-textfield-input" id="price-number" />
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-2">
                <h2>面纸费用：</h2>
            </div>
            <div class="mdui-col-xs-2 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">面积：长</label>
                <input class="mdui-textfield-input" id="price-length" onblur="computePaper()"/>
            </div>
            <div class="mdui-col-xs-2 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">面积：宽</label>
                <input class="mdui-textfield-input" id="price-width" onblur="computePaper()" />
            </div>
            <div class="mdui-col-xs-2 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">克重</label>
                <input class="mdui-textfield-input" id="price-paper-weight" onblur="computePaper()" />
            </div>
            <div class="mdui-col-xs-2 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">费用</label>
                <input class="mdui-textfield-input" id="price-paper-cost" onblur="computePaper()" />
            </div>
            <div class="mdui-col-xs-2">
                <h2 id="paper-price">= 0 元/个</h2>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-2">
                <h2>印刷：</h2>
            </div>
            <div class="mdui-col-xs-8 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">印刷</label>
                <input class="mdui-textfield-input" id="price-print" onblur="computePrint()"/>
            </div>
            <div class="mdui-col-xs-2">
                <h2 id="print-price">= 0 元/个</h2>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-2">
                <h2>膜：</h2>
            </div>
            <div class="mdui-col-xs-8 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">膜</label>
                <input class="mdui-textfield-input" id="price-skin" onblur="computeSkin()" />
            </div>
            <div class="mdui-col-xs-2">
                <h2 id="skin-price">= 0 元/个</h2>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-2">
                <h2>纸张：</h2>
            </div>
            <div class="mdui-col-xs-8 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">纸张</label>
                <input class="mdui-textfield-input" id="price-plate" onblur="computePlate()"/>
            </div>
            <div class="mdui-col-xs-2">
                <h2 id="plate-price">= 0 元/个</h2>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-2">
                <h2>刀版：</h2>
            </div>
            <div class="mdui-col-xs-8 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">刀版</label>
                <input class="mdui-textfield-input" id="price-knife" onblur="computeKnife()"/>
            </div>
            <div class="mdui-col-xs-2">
                <h2 id="knife-price">= 0 元/个</h2>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-4 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">加工</label>
                <input class="mdui-textfield-input" id="price-work" />
            </div>
            <div class="mdui-col-xs-4 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">格套</label>
                <input class="mdui-textfield-input" id="price-pattern" />
            </div>
            <div class="mdui-col-xs-4 mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">其他</label>
                <input class="mdui-textfield-input" id="price-other" />
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-8">
                <span class="mdui-text-color-theme" id="price">预估价格：无</span>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-color-theme-accent mdui-ripple" onclick="price_caculator()">开始计算</button>
            </div>
        </div>
    </div>

    <script src="//cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/holderjs@2.9.7/holder.min.js"></script>
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/highlight.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
    <script>
        var $ = mdui.$;
        function checkNum() {
            ids = ["box-length", "box-width", "box-height"]
            for (i in ids) {
                element = document.getElementById(ids[i]).value
                if (isNaN(element)) {
                    num = parseInt(i) + 1
                    init()
                }
            }
        }
        function caculator() {
            A = parseInt(document.getElementById("box-length").value)
            B = parseInt(document.getElementById("box-width").value)
            C = parseInt(document.getElementById("box-height").value)
            sele = parseInt(document.getElementById("box").value)
            ratio = [
                [2, 2, 0, 40, 0, 1, 1, 20],
                [1, 1, 0, 40, 0, 1, 1, 20],
                [1, 1, 0, 40, 0, 1, 1, 20],
                [1, 1, 0, 40, 1, 0, 1, 20],
                [1, 1, 0, 40, 0, 1, 1, 20],
                [1, 0, 4, 32, 0, 2, 2, 20],
                [0, 2, 3, 21, 1, 0, 4, 42],
                [1, 0, 4, 67, 0, 1, 4, 51],
                [1, 0, 4, 34, 0, 1, 4, 24]
            ]
            value = ratio[sele - 1]
            length = A * value[0] + B * value[1] + C * value[2] + value[3]
            width = A * value[4] + B * value[5] + C * value[6] + value[7]
            document.getElementById("ans").innerText = "预估面积：长 " + length + "，幅宽" + width
        }

        function price_caculator() {
            num = Number(document.getElementById("price-number").value)

            price_length = Number(document.getElementById("price-length").value)
            price_width = Number(document.getElementById("price-width").value)
            area = Number(((price_length * price_width) / 10000).toFixed(3))

            weight = Number(document.getElementById("price-paper-weight").value)
            cost = Number(document.getElementById("price-paper-cost").value)
            paper = Number(((area * weight * cost) / 1000000).toFixed(3));

            print = Number(document.getElementById("price-print").value)
            skin = Number(document.getElementById("price-skin").value)
            plate = Number(document.getElementById("price-plate").value)
            knife = Number(document.getElementById("price-knife").value)
            work = Number(document.getElementById("price-work").value)
            pattern = Number(document.getElementById("price-pattern").value)
            other = Number(document.getElementById("price-other").value)

            price =
                (
                    this.paper +
                    Number((print / num).toFixed(3)) +
                    Number((skin * area).toFixed(3)) +
                    Number((plate * area).toFixed(3)) +
                    Number((knife / num).toFixed(3)) +
                    work * 1.0 +
                    pattern * 1.0 +
                    other * 1.0
                ).toFixed(3);
            document.getElementById("price").innerText = "预估价格： " + price + " 元";
        }
        function computePaper() {
            price_length = Number(document.getElementById("price-length").value)
            price_width = Number(document.getElementById("price-width").value)
            area = Number(((price_length * price_width) / 10000).toFixed(3))

            weight = Number(document.getElementById("price-paper-weight").value)
            cost = Number(document.getElementById("price-paper-cost").value)
            paper = Number(((area * weight * cost) / 1000000).toFixed(3));

            document.getElementById("paper-price").innerText = "= "+ paper +" 元/个"
        }
        function computePrint() {
            num = Number(document.getElementById("price-number").value)
            print = Number(document.getElementById("price-print").value)
            printprice = Number((print / num).toFixed(3))
            document.getElementById("print-price").innerText = "= "+ printprice +" 元/个"
        }
        function computeSkin() {
            price_length = Number(document.getElementById("price-length").value)
            price_width = Number(document.getElementById("price-width").value)
            area = Number(((price_length * price_width) / 10000).toFixed(3))
            skin = Number(document.getElementById("price-skin").value)
            skinprice = Number((skin * area).toFixed(3))
            document.getElementById("skin-price").innerText = "= "+ skinprice +" 元/个"
        }
        function computePlate() {
            price_length = Number(document.getElementById("price-length").value)
            price_width = Number(document.getElementById("price-width").value)
            area = Number(((price_length * price_width) / 10000).toFixed(3))
            plate = Number(document.getElementById("price-plate").value)
            plateprice = Number((plate * area).toFixed(3))
            document.getElementById("plate-price").innerText = "= "+ plateprice +" 元/个"
        }
        function computeKnife() {
            num = Number(document.getElementById("price-number").value)
            knife = Number(document.getElementById("price-knife").value)
            knifeprice = Number((knife / num).toFixed(3))
            document.getElementById("knife-price").innerText = "= "+ knifeprice +" 元/个"
        }
        function init() {
            document.getElementById("ans").innerText = "预估面积：无"
            document.getElementById("price").innerText = "预估价格：无"
        }
    </script>
    <script src="//cdn.w3cbus.com/mdui.org/docs/assets/docs/js/docs-v1.js"></script>
</body>

</html>